import React, {Component} from 'react';
import ReactEcharts from 'echarts-for-react';
import {Card} from 'antd'

class Bar extends Component {
  render() {
    return (
      <div>
        <Card title="饼图一">
          <ReactEcharts option={this.getOption1()}/>
        </Card>
        <Card title="饼图二">
          <ReactEcharts option={this.getOption2()}/>
        </Card>
      </div>
    );
  }
  
  // 饼图一配置
  getOption1 = () => {
    return {
      title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        left: 10,
        top: 20,
        bottom: 20,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
        selected: {
          "直接访问":true,
          "邮件营销":true,
          "联盟广告":true,
          "视频广告":true,
          "搜索引擎":true
        }
      },
      series: [
        {
          name: '姓名',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            {name: "直接访问", value: 335},
            {name: "邮件营销", value: 310},
            {name: "联盟广告", value: 234},
            {name: "视频广告", value: 135},
            {name: "搜索引擎", value: 1548}
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
      // ['直接访问', '右键营销', '联盟广告', '视频广告', '搜索引擎']
  }
  
  // 饼图二配置
  getOption2 = () => {
    return {
      backgroundColor: '#2c343c',
  
      title: {
        text: 'Customized Pie',
        left: 'center',
        top: 20,
        textStyle: {
          color: '#ccc'
        }
      },
  
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
  
      visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
          colorLightness: [0, 1]
        }
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '50%'],
          data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 274, name: '联盟广告'},
            {value: 235, name: '视频广告'},
            {value: 400, name: '搜索引擎'}
          ].sort(function (a, b) { return a.value - b.value; }),
          roseType: 'radius',
          label: {
            color: 'rgba(255, 255, 255, 0.3)'
          },
          labelLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            },
            smooth: 0.2,
            length: 10,
            length2: 20
          },
          itemStyle: {
            color: '#c23531',
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
      
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200;
          }
        }
      ]
    }
  }
}


export default Bar;
